<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"><!--禁止缩放   -->
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="js/bootstrap.js"></script>
  <title>遮罩层</title>
<style type="text/css">
.mask-wrapper {
position: relative;
overflow: hidden;
}
.mask-inner {
position: absolute;
left: 0;
top: 80%;
width: 100%;
height: 100%;
/*当属性变化时，延迟两百毫秒*/
transition: top ease 2000ms;

}
.mask-wrapper:hover .mask-inner {
top: 0;
}
#my-mask {
width: 300px;
height: 200px;
background: #D3D3D3;
}
#my-mask .mask-inner {
background: #EBEBEB;
}
</style>
</head>
<body>
<div id="my-mask" class="mask-wrapper text-center">
  <h2>我是下面的一层</h2>
<div class="mask-inner">
    <div class="table-bordered">
        <address class="container-fluid">
          <strong>地址</strong><br>
          湖南省常德市鼎城区鼎欣嘉豪小区<br>
          B栋1106<br>
          <abbr title="Phone">电话:</abbr> 17601362254
        </address>
      </div>

</div>
</div>
</body>
</html>
